<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>添加班级</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input
            placeholder="编号"
            v-model="addForm.c_id"
            style="width: 5rem"
          >
          </el-input>
          <el-input
            placeholder="例如:计科1班"
            v-model="addForm.classes"
            clearable
            style="width: 9rem"
          >
          </el-input>
          <el-button type="primary" @click="add">添加</el-button>
        </el-col>
        <el-col :span="12">
          <el-select
            v-model="value"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="filterData"
            :clearable="true"
            @clear="clear_search"
          >
            <el-option
              v-for="item in options"
              :key="item.c_id"
              :label="item.classes"
              :value="item.c_id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-card>
    <el-divider></el-divider>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>所有班级</span>
      </div>
      <el-table
        :data="tableData"
        border
        :default-sort="{ prop: 'c_id', order: 'descending' }"
        style="width: 100%"
      >
        <el-table-column prop="c_id" sortable label="班级编号">
        </el-table-column>
        <el-table-column prop="classes" label="班级名称"> </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginations.page_index"
        :page-sizes="paginations.page_sizes"
        :page-size="paginations.page_size"
        :layout="paginations.layout"
        :total="paginations.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {

  data () {
    return {
      addForm: {
        c_id: '',
        classes: ''
      },
      tableData: [],
      paginations: {
        page_index: 1,   //当前位于哪页
        total: 0,        //总数
        page_size: 5,    //一页显示多少条
        page_sizes: [5, 10, 15, 20],    //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper"    //翻页属性
      },
      options: [],
      loading: false,
      value: '',
      allTableDate: [],
      filterTable: [],
    }
  },
  created () {
    this.getclass();
  },
  methods: {
    /**
     * 添加班级
     Classes:this.input
     */
    async add () {
      if (!this.addForm.c_id || !this.addForm.classes) this.open3("提交添加班级不可为空")
      else {
        const result = await this.$Axios.post('admin/addClasses', this.addForm)
        console.log(result);
        this.open2("添加班级成功")
        this.getclass()
      }

    },

    /**
     * 获取班级信息
     this.tableData=result.data;
     this.total=result.data.length;
     */
    async getclass () {
      const { data: result } = await this.$Axios.get('admin/getClasses')
      console.log(result)
      this.filterTable = result
      this.allTableDate = result
      this.setPaginations()

    },
    //设置分页数据
    setPaginations () {
      this.paginations.total = this.filterTable.length
      this.handleCurrentChange(this.paginations.page_index)
    },
    //当每页数据条数发生改变时触发
    handleSizeChange (page_size) {
      this.paginations.page_size = page_size
      this.setPaginations()

    },
    handleCurrentChange (page) {
      this.paginations.page_index = page
      //获取当前页
      let index = this.paginations.page_size * (page - 1)
      //数据的总数
      let nums = this.paginations.page_size * page

      let table = []
      for (let i = index; i < nums; i++) {
        if (this.filterTable[i]) {
          table.push(this.filterTable[i])
        }
      }
      this.tableData = table
    },

    //清空搜索框内容并重新加载数据
    clear_search () {
      this.tableData = this.filterTable = this.allTableDate
      this.paginations.total = this.tableData.length
      this.tableData = this.allTableDate.filter((item, index) => {
        return index < this.paginations.page_size
      })
    },

    async remoteMethod (val) {
      if (!val) return
      this.loading = true
      const { data: result } = await this.$Axios.get('admin/searchClasses', {
        params: {
          c_id: val,
          classes: val
        }
      })
      this.options = result
      this.loading = false
    },

    filterData (val) {
      this.tableData = this.filterTable.filter((item, index) => {
        return item.c_id == val
      })
      this.paginations.total = this.tableData.length
    },


    open1 (v) {
      this.$message(v);
    },
    open2 (v) {
      this.$message({
        message: v,
        type: 'success'
      });
    },
    open3 (v) {
      this.$message({
        message: v,
        type: 'warning'
      });
    },
    open4 (v) {
      this.$message.error(v);
    }
  }
}
</script>

<style scoped>
</style>